<template>
  <div class="detali_container">
    <el-button class="edit">
      <icon-material-symbols-edit-square-outline style="font-size: 26px;" />
    </el-button>
    <div class="item">
      <span class="id">项目编号</span>
      <span class="title">{{ user?.projectId }}</span>
    </div>
    <div class="desc item">
      <span>项目描述</span>
      <span>{{ user?.id }}</span>
    </div>

    <div class="reported item">
      <span>报告人</span>
      <div>
        <img src="@/assets/vue.svg" alt="">
        <span>{{ user?.title }}</span>
      </div>
    </div>
    <div class="executor item">
      <span>执行人</span>
      <div v-if="user?.task?.executor">
        <img :src="user?.task?.executor[0]" alt="">
        <img :src="user?.task?.executor[1]" alt="">
        <img :src="user?.task?.executor[2]" alt="">
        <span class="imgs" v-if="user?.task?.executor.length > 3">+{{ user!.task!.executor!.length - 3 }}</span>
      </div>
    </div>
    <div class="level item">
      <span>优先等级</span>
      <Tendency :level="user!.level" :is-up="false" />
    </div>
    <div class="date item">
      <span>截至日期</span>
      <span>2021-12-31</span>
    </div>
    <div class="create_time item">
      <icon-ph-calendar-blank-fill />
      <span>创建于{{ user?.date }}</span>
    </div>
    <div class="footer item">
      <el-button>
        <icon-ph-paperclip-light />
      </el-button>
      <el-button>
        <icon-akar-icons-link-chain />
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import Tendency from '@/components/utils/tendency.vue';
import { IProject } from '@/types/project';
import { ref, inject, Ref } from 'vue';

const user = inject<Ref<IProject>>('navSelected')

</script>


<style scoped lang="scss">
.detali_container {
  width: 260px;
  background-color: white;
  border-radius: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px 20px;
  gap: 20px;
  text-align: left;
  position: relative;

  :deep(.el-button) {
    width: 40px;
    height: 40px;
    padding: 0;
  }

  .edit {
    position: absolute;
    top: 20px;
    right: 20px;
  }


  .item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    font-size: 16px;

    img {
      width: 25px;
      height: 25px;
      border-radius: 50%;
    }

    &.reported {
      >div {
        display: flex;
        align-items: center;
      }
    }


    &.executor {
      >div {
        display: flex;
        align-items: center;


        .imgs {
          display: inline-block;
          width: 25px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          background-color: blueviolet;
          color: white;
          font-size: 12px;
          border-radius: 50%;

        }
      }
    }

    &.create_time {
      flex-direction: row;
    }


    &.footer {
      gap: 6px;
      width: 100%;
      justify-content: flex-start;
      flex-direction: row;
    }

    span {
      &:nth-of-type(1) {
        font-size: 14px;
        color: #91929E;

      }
    }

    &.desc {
      >span {
        &:nth-of-type(1) {
          font-size: 18px;
          color: #000;
        }

        &:nth-of-type(2) {
          font-size: 14px;
          color: #0A1629;
        }
      }
    }
  }
}
</style>